<template>
  <div class="water-ball-container">
    <div class="chart" ref="chart"></div>
    <div class="desc">{{title}}</div>
  </div>
</template>

<script>
import echarts from 'echarts/lib/echarts'
import 'echarts-liquidfill'

export default {
  name: 'water-ball',
  data () {
    return {
    }
  },
  props: {
    value: {
      type: Number,
      default: 0.8
    },
    title: {
      type: String,
      default: ''
    },
    alarm: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    title (val) {
      if (val) {
        this.setOption()
      }
    },
    value () {
      this.setOption()
    },
    alarm () {
      this.setOption()
    }
  },
  mounted () {
    this.setOption()
  },
  methods: {
    setOption () {
      const value = this.value
      const backgroundStyleColor = !this.alarm ? new echarts.graphic.LinearGradient(
        0, 0, 0, 1,
        [
          { offset: 0, color: 'rgba(143,173,254,1)' },
          { offset: 1, color: 'rgba(96,120,253,1)' }
        ]
      ) : new echarts.graphic.LinearGradient(
        0, 0, 0, 1,
        [
          { offset: 0, color: 'rgba(209,139,154,1)' },
          { offset: 1, color: 'rgba(228,54,54,1)' }
        ]
      )

      const color = !this.alarm ? [new echarts.graphic.LinearGradient(
        0, 0, 0, 1,
        [
          { offset: 0, color: 'rgba(191,266,255, 1)' },
          { offset: 1, color: 'rgba(191,266,255, 0)' }
        ]
      ), new echarts.graphic.LinearGradient(
        0, 0, 0, 1,
        [
          { offset: 0, color: 'rgba(191,266,255, 1)' },
          { offset: 1, color: 'rgba(191,266,255, 0)' }
        ]
      )] : [new echarts.graphic.LinearGradient(
        0, 0, 0, 1,
        [
          { offset: 0, color: 'rgba(247,184,45, 1)' },
          { offset: 1, color: 'rgba(247,184,45, 0)' }
        ]
      ), new echarts.graphic.LinearGradient(
        0, 0, 0, 1,
        [
          { offset: 0, color: 'rgba(247,184,45, 1)' },
          { offset: 1, color: 'rgba(247,184,45, 0)' }
        ]
      )]

      const borderColor = !this.alarm ? '#5F77FD' : '#E43434'
      const option = {
        series: [{
          type: 'liquidFill',
          data: [value, value],
          radius: '90%',
          backgroundColor: '#ffffff',
          backgroundStyle: {
            color: backgroundStyleColor
          },
          color: color,
          itemStyle: {
            opacity: 0.6
          },
          emphasis: {
            itemStyle: {
              opacity: 0.9
            }
          },
          outline: {
            borderDistance: 0,
            itemStyle: {
              borderWidth: 10,
              borderColor: borderColor,
              shadowColor: '#ffffff'
            }
          },
          label: {
            fontSize: 16,
            color: '#ffffff',
            fontWeight: '500'
          }
        }]
      }
      this.barChart = echarts.init(this.$refs.chart)
      this.barChart.setOption(option)
    }
  }
}
</script>

<style scoped lang="stylus">
.water-ball-container
  display flex
  width 177px
  justify-content center
  align-items center
  flex-direction column
  .chart
    height 170px
    width 177px
  .desc
    margin-top 16px
    font-size 16px
    font-weight 500
    line-height 14px
    color #333333
</style>
